<template>
  <div>
    <input type="text" v-model.trim="keyword" @keyup.enter="handleEnter" />
  </div>
  <todo-item @delete="handleDelete" :items="doingList">
    <h2>正在进行</h2>
  </todo-item>
  <todo-item @delete="handleDelete" :items="finishList">
    <h2>已完成</h2>
  </todo-item>
</template>

<script setup>
import { computed, watch } from "vue";
import TodoItem from "./components/TodoItem.vue";
import useListHook from "./hooks/useListHook";
const { keyword, list, handleEnter } = useListHook();
/* 正在进行中 */
const doingList = computed(() => {
  return list.value.filter((item) => !item.state);
});
/* 已完成 */
const finishList = computed(() => {
  return list.value.filter((item) => item.state);
});
watch(
  list,
  (val) => {
    console.log(val);
    /* setStorge(key,val) */
    localStorage.setItem("items", JSON.stringify(val));
  },
  {
    deep: true,
  }
);

/* 删除 */
const handleDelete = (name) => {
  var items = list.value.filter((item) => item.name != name);
  list.value = items;
};
</script>

<style scoped></style>
